<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>
        .search-a{
            background: #F3F3F3;
            color: #323232;
            /* width: 80px; */
            /* line-height: 20px; */
            /* text-align: center; */
            display: inline-block;
            padding: 5px 10px;
            border-radius: 100px;
        }
        .search .history-search ul li:nth-child(4n){
            margin-right: .3rem;
        }
        .search .hot-search ul li:nth-child(4n), .search .search_result ul li:nth-child(4n){
            margin-right: .3rem;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="title flex">
            <input type="text" placeholder="请输入要查找信息" id="search_info">
            <span onclick="messageSearch($('#search_info').val())">搜索</span>
        </div>


        <!--<div class="hot-search">
            <p class="p1">
                历史搜索
            </p>
            <ul class="clearfix">
                <li id="hotsearch" style="margin-right: 0;">
                    <!--自由自在-->
                <!--</li>
            </ul>
        </div>-->

        <div class="history-search">
            <p class="p1 flex">
                <span>历史搜索</span>
                <!--<em></em>-->
            </p>
            <ul class="clearfix" id="hisul">

            </ul>
        </div>

        <div class="search_result" id="search_result">
            <p class="p1">
     	 搜索结果
            </p>
            <ul class="clearfix">

            </ul>
        </div>
    </div>

    <script>
    	//messageSearch('+$("#search_info").val()'+)
    	$('#search_info').val('')
        $(function () {
            var info;
            $('.search_result').hide();
            $('#search_info').keyup(function (e) {
                info = $(this).val();
                console.log(info)
	              if (e.keyCode === 13) {
	              	messageSearch(info)
	              }
	        })

//          hotSearch();
            historySearch();

        })
        function cvvc (){
        	$('#hisul .search-a').click(function(){
	        	var infor =$(this).text()
	        	console.log(infor)
	      		messageSearch(infor)
	        })
        }
        function hotSearch (){
            //热门搜索
            var uid = sessionStorage.getItem("uid");
            var params = "?uid="+uid;
            $.ajax({
                url:base_url+'ZITAOHUI/search/popular'+params,
                dataType:"json",
                success:function (data){
                    console.log(data);
                    console.log('热门搜索');
                    if(data.code == 1){
                    	if(data.extend.data.length>10){
                    		for(var i=0;i<10;i++){
                    			$("#hotsearch").append('<li><span class="search-a" >'+data.extend.data[i].produceName+'</span></li>');
                    		}
                    	}else{
                    		$.each(data.extend.data,function (k,v){
	                            $("#hotsearch").append('<li><span class="search-a" >'+v.produceName+'</span></li>');
	                        })
                    	}
                        

                    }else{
                        alert("网络请求超时");
                    }
					cvvc ()
                }
                
            })
        }

        
        function historySearch (){
            //历史搜索
            var uid = sessionStorage.getItem("uid");
            var params = "?uid="+uid
            $.ajax({
                url:base_url+'ZITAOHUI/search/history'+params,
                dataType:"json",
                success:function (data){
                    console.log(data);
                    console.log('历史搜索');
                    if(data.code == 1){
                    	var _data =data.extend.data;
                    	if(_data.length>10){
                    		for(var i=0;i<10;i++){
                    			  $("#hisul").append('<li><span class="search-a">'+data.extend.data[i].produceName+'</span></li>');
                    		}
                    	}else{
                    		for(var i=0;i<_data.length;i++){
                    			  $("#hisul").append('<li><span class="search-a">'+data.extend.data[i].produceName+'</span></li>');
                    		}
//                  		$.each(data.extend.data,function (k,v){
//	                            $("#hisul").append('<li><span class="search-a" >'+v.produceName+'</span></li>');
//	                        })
                    	}
                    }else{
                        alert("网络请求超时");
                    }
 					cvvc()
                }
            })
           
        }
        function addSearch (msg){
            $.ajax({
                url:base_url+"ZITAOHUI/search/add",
                type:"post",
                data:{
                    uid:sessionStorage.getItem("u_id"),
                    name:msg
                },
                dataType:"json",
                success:function (data){

                }
            })
        }
        function messageSearch(info){
        	$.ajax({
                url: base_url + 'ZITAOHUI/firstPage/search',
                data: {
                    param: info
                },
                success: function (data) {
                    // 重置所有搜索结果
                    addSearch(info);
                    $('.search_result ul').empty();
                    $('.search_result').show();
                    console.log(data)
                    console.log('重置所有搜索结果')
                    var all_data = data.extend.produce.length +data.extend.store.length;
                    if(all_data == 0){
                        $("#search_result").hide();
                        alert("暂未搜索到相关信息");
//						location.reload()
                    }else{
                    	console.log(all_data)
                        for (var i = 0; i < data.extend.produce.length; i++) {
                            var li = $('<li></li>');                            
                            li.append(data.extend.produce[i].produce_title);
                            li.attr('data-id', data.extend.produce[i].produce_id);
                            li.attr('data-whitchType', data.extend.produce[i].produce_first_type);
                            li.css({
                                "width": '50%',
                                'margin-right': '0'
                            })
                            $('.search_result ul').append(li)
                        }
                        for (var i = 0; i < data.extend.store.length; i++) {
                            var li = $('<li></li>');
                            li.append('<img src="../img/wxb.png" style="width:0.18rem;height:0.18rem">'+data.extend.store[i].store_name);
                            li.attr('data-id', data.extend.store[i].store_id);
                            li.attr('data-whitchType', 'ss');
                            li.css({
                                "width": '50%',
                                'margin-right': '0'
                            })
                            $('.search_result ul').append(li)
                        }
                        $('.search_result ul li').click(function (e) {
                        	console.log($(this).data('whitchtype'))
                            if ($(this).data('whitchtype') == 'ss') {
//                              window.location.href =
//                                  '../page/buy-info-page.4.html?p_id=' + $(
//                                  this).data(
//                                  'id')
								 window.location.href =
                                    '../page/Shop.html?s_id=' + $(
                                    this).data(
                                    'id')
                            } else {
                            	if ($(this).data('whitchtype') == 0) {
	                              	window.location.href =
	                                  '../page/buy-info-page.4.html?p_id=' + $(
	                                  this).data(
	                                  'id')
	                            } else {
	                                window.location.href =
	                                    '../page/buy-info-page.3.html?p_id=' + $(
	                                    this).data(
	                                    'id')
	                            }
                            }
                        })
                    }


                },
                error: function () {
                    console.error('接口错误')
                }
            })
        }
    </script>




</body>

</html>